<!--
 * @Author: Your Name you@example.com
 * @Date: 2025-06-30 16:27:18
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2025-07-02 18:29:01
 * @FilePath: \web\src\components\Scanner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="circle">
    <div class="circle-inner">
      <!-- <svg class="sector-svg" viewBox="0 0 100 100">
        <defs>
          <linearGradient id="sectorGradient" x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#5da4e3" />
            <stop offset="100%" stop-color="#4251da" />
          </linearGradient>
        </defs>
      <path d="M50,50 L50,10 A40,40 0 0,1 85.64,29.28 Z" fill="url(#sectorGradient)" opacity="0.7" />
      </svg> -->
      <div class="sector-out"></div>
      <div class="sector"></div>
      <div class="tick" v-for="n in 9" :key="n" :style="getTickStyle(n)"></div>
      <div class="circle-inner-inner">
        <div class="circle-circle"></div>
      </div>
    </div>
    <div class="circle-inner1"></div>
      <div class="text">
        <div class="text-number">{{ number }}</div>
        <div class="text-text">{{ text }}</div>
      </div>
    </div>
</template>

<script setup>
const total = 9;
const radius = 4.8; // 圆环半径，单位vw
const tickHeight = 0.6; // 刻度高度，单位vw
const props = defineProps({
  text: {
    type: String,
    default: '文字部分'
  },
  number: {
    type: Number,
    default: '140'
  }
});
const getTickStyle = (n) => {
  const angle = (n - 1) * (360 / total);
  const offset = radius - tickHeight / 2;

  return {
    position: 'absolute',
    left: '50%',
    top: '45%',
    width: '0.2vw',
    height: `${tickHeight}vw`,
    background: '#A9C0C9',
    transform: `rotate(${angle}deg) translateY(-${offset}vw)`,
    transformOrigin: 'center bottom',
    zIndex: 2
  };
};
</script>
<style scoped lang="scss">
@use 'sass:math';

@function px-to-vw($px) {
  @return (math.div($px, 1920) * 100)+vw;
}

// .sector-out {
//   position: absolute;
//   left: 1vw;
//   top: 1vw;
//   width: 10.1vw;
//   height: 10.1vw;

//   border-radius: 50%;
//   background: conic-gradient(from 0deg, #35e5ff 0deg 60deg, transparent 60deg 360deg);
//   opacity: 0.7;
//   z-index: 1;
//   transform: rotate(50deg);
// }
.text {
  position: absolute;
  top: 3vw;

  display: flex;
  flex-direction: column;
  align-items: center;

  .text-text {
    color: #fff;
    font-size: px-to-vw(14);
  }

  .text-number {
    color: #A6F4FF;
    font-size: px-to-vw(22);
  }
}

.sector {
  position: absolute;
  left: 1vw;
  top: 1vw;
  width: 10vw;
  height: 10vw;

  border-radius: 50%;
  background: conic-gradient(from -30deg, transparent 0deg 240deg, #35e5ff 240deg 300deg, transparent 300deg);
  mask: radial-gradient(transparent 10%, black 50%);
  border: none;

  opacity: 0.7;
  z-index: 2;
  // transform: rotate(50deg);
  animation: rotate 3s linear 2s infinite alternate;
  /* Safari 与 Chrome: */
  -webkit-animation: rotate 3s linear 2s infinite alternate;
}

.sector::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  // border: #f00909 solid 0.3vw;
  z-index: -1;
}

@keyframes rotate {
  from {
    transform: rotate(30deg);
  }

  to {
    transform: rotate(210deg);
  }
}

.tick {
  pointer-events: none;

  &:nth-child(7) {
    display: none;
  }

  &:nth-child(8) {
    display: none;
  }

  // &:nth-child(3) {
  //   display: none;
  // }
}

.circle {
  position: relative;
  width: 4.6vw;
  height: 4.6vw;
  top: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 2vw;
  // margin-right: 20px;
  border-radius: 50%;
  // // background-color: #fff;
  border: 0.17vw solid #3590d6;
  border-bottom: 0.17vw solid rgba($color: #000000, $alpha: 0);
}

.sector-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.circle-inner {
  position: absolute;

  width: 12.5vw;
  height: 12.5vw;
  // margin-top: 2vw;
  // margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  // // background-color: #fff;
  border: 0.2vw dashed rgba($color: #000000, $alpha: 0);
  border-bottom: 0.2vw dashed rgba($color: #000000, $alpha: 0);
  transform: scale(0.33);
}
.circle-inner1{
  position: absolute;
  
    width: 8.2vw;
    height: 8.2vw;
    // margin-top: 2vw;
    // margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    // // background-color: #fff;
    border: 0.2vw dashed #1689ac;
    border-bottom: 0.2vw dashed rgba($color: #000000, $alpha: 0);
    transform: scale(0.5);
}

.circle-inner-inner {
  position: relative;
  width: 3.8vw;
  height: 3.8vw;
  // margin-top: 2vw;
  // margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transform: scale(3);
  // // background-color: #fff;
  border: 0.2vw solid #4251da;
  border-bottom: 0.2vw solid rgba($color: #000000, $alpha: 0);
}

.circle-circle {
  position: relative;

  width: px-to-vw(8); // 7.5px -> 0.390625vw
  height: px-to-vw(8);
  border-radius: 50%;
  border: px-to-vw(2) solid #5da4e3; //
}
</style>
<!-- 大屏巡检环开发 -->
